<%@page contentType="text/html" pageEncoding="UTF-8"%>

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" type="text/css" href="${rootPath}/js/plugins/daterange/daterangepicker.css">
        <%@include file="../common/head.jspf" %>
    </head>

    <body class="profile-page gallery-page sb-l-o sb-r-c" data-menu="" data-list="#li_user">

        <!-- 主体内容开始 -->
        <div id="main">

            <!--侧边导航栏-->
            <%@include file="../common/sidebar.jspf" %>

            <!-- Start: Content-Wrapper -->
            <section id="content_wrapper">

                <!-- 顶部导航 -->
                <header id="topbar">
                    <div class="topbar-left">
                        <ol class="breadcrumb">
                            <li class="crumb-active">
                                <span>软擎科技</span>
                            </li>
                            <li class="crumb-icon">
                                <a href="dashboard"><span class="glyphicon glyphicon-home"></span></a>
                            </li>
                            <li class="crumb-icon">
                                <a href="pointsystem/commoditylist">商品列表</a>
                            </li>
                            <!-- 当前页 -->
                            <li class="crumb-trail">商品详情页</li>
                        </ol>
                    </div>
                    <div class="topbar-right">
                        <!-- 登录信息 -->
                        <%@include file="../common/session.jspf" %>
                    </div>
                </header>
                <!-- 顶部导航结束 -->

                <!-- 页面内容开始 -->
                <section id="content" class="pn">
                    <div class="pv30 ph40 bg-light dark br-b br-grey posr">
                        <div id="user" class="hidden" data-id="${model.commodity.id}" data-tab="${model.tab}"></div>
                        <div id="commodityId" class="hidden" data-id="${model.commodity.id}" data-tab="${model.tab}"></div>
                        <div class="btn-group profile-settings-btn">
                            <button type="button" class="btn btn-default dropdown-toggle pl20" data-toggle="dropdown"><i class="fa fa-wrench mr5"></i>相关操作
                                <span class="caret ml5"></span>
                            </button>
                            <ul class="dropdown-menu pull-right" role="menu">
                                <li>
                                    <a href="pointsystem/commodityedit/${model.commodity.id}" target="_blank"><span class="glyphicons glyphicons-edit mr5"></span>编辑商品</a>
                                </li>

                            </ul>
                        </div>
                        <div class="table-layout">
                            <div class="w200 text-center pr30 hidden">
                                <img src="${rootPath}/img/avatar.jpg" class="responsive">
                            </div>
                            <div class="va-t m30">
                                <h2 class="mb20"> ${model.commodity.cname} <small> ${model.commodity.cname}</small></h2>
                            </div>
                        </div>
                    </div>
                    <div class="p25 pt35">
                        <div class="row">
                            <div class="col-md-3">

                                <div class="panel">
                                    <div class="panel-heading">
                                        <span class="panel-icon"><i class="fa fa-briefcase"></i></span>
                                        <span class="panel-title"> 商品图片</span>
                                    </div>
                                    <div class="panel-body pn">
                                        <table class="table mbn tc-med-2 tc-bold-last">
                                            <thead>
                                                <tr class="hidden">
                                                    <th>First Name</th>
                                                    <th>Revenue</th>
                                                </tr>
                                            </thead>
                                            <tbody>
                                                <tr>
                                                    <td>
                                                        <a href="${model.commodity.image_url}" target="_blank">
                                                            <img src="${model.commodity.image_url}!s" data-url="${model.commodity.image_url}" class="h-120 doc_img cursor-pointer" title="">
                                                        </a>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>


                            </div>
                            <div class="col-md-9">
                                <div class="tab-block">
                                    <ul class="nav nav-tabs">
                                        <li id="li-info">
                                            <a href="#tab-info" data-toggle="tab">商品信息</a>
                                        </li>
                                        <li id="li-images">
                                            <a href="#tab-images" data-toggle="tab">上传图片</a>
                                        </li>
                                        <li id="li-fund">
                                            <a href="#tab-fund" data-toggle="tab">操作记录</a>
                                        </li>

                                    </ul>
                                    <div class="tab-content pn">
                                        <div id="tab-info" class="tab-pane">
                                            <div class="ph15 pv40 fs14">
                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">商品描述：</div>
                                                    <div class="col-xs-10 col-md-6">${model.commodity.description}</div>
                                                </div>
                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">商品单位：</div>
                                                    <div class="col-xs-10 col-md-6">${model.commodity.unit}</div>
                                                </div>
                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">对应积分：</div>
                                                    <div class="col-xs-10 col-md-6">${model.commodity.points}</div>
                                                </div>

                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">商品状态：</div>
                                                    <div class="col-xs-10 col-md-6">
                                                        ${model.commodity.state==0?'下线':'上线'}
                                                    </div>
                                                </div>

                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">创建时间：</div>
                                                    <div class="col-xs-10 col-md-6">
                                                        <fmt:formatDate value="${model.commodity.recordTime}" pattern="yyyy/MM/dd HH:mm" />
                                                    </div>
                                                </div>
                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">创建人：</div>
                                                    <div class="col-xs-10 col-md-6" id="userSource">${model.commodity.creater_name}</div>
                                                </div>
                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">更改时间：</div>
                                                    <div class="col-xs-10 col-md-6" id="userCampaign">
                                                        <fmt:formatDate value="${model.commodity.updateTime}" pattern="yyyy/MM/dd HH:mm" />

                                                    </div>
                                                </div>
                                                <div class="row mb15">
                                                    <div class="col-xs-2 text-right">更改人：</div>
                                                    <div class="col-xs-10 col-md-6" id="userTerm">${model.commodity.updater_name ? '' : model.commodity.updater_name}</div>
                                                </div>
                                                <hr class="bg-light"/>

                                                <div id="displayInfo">

                                                </div>
                                            </div>
                                        </div>

                                        <!--认证图片-->
                                        <div id="tab-images" class="tab-pane p20 min-h-800">
                                            <div id="image-container" class="mt20">
                                                <div class="image bg-light pull-left cursor-pointer p10 pt30" style="height:210px;" id="addImageBtn">
                                                    <div class="text-center text-muted-lighter pt50"><fa class="fa fa-plus fw400 mr5"></fa>添加图片</div>
                                                </div>
                                            </div>
                                        </div>

                                        <!--记录-->
                                        <div id="tab-fund" class="tab-pane">
                                            <div class="panel panel-visible mbn br-n">
                                                <div class="panel-heading h-50 lh50 br-t-n">
                                                    <span class="panel-title">
                                                        <code><span class="glyphicons glyphicons-coins mr5"></span>共<span id="fundCount"></span>条记录</code>    
                                                    </span>
                                                    <div class="dataTables_length mn pull-right">
                                                        <!--                                                        <label>资金类型 
                                                                                                                    <select name="fundType" id="fundType" class="form-control h-30">
                                                                                                                        <option value="">全部</option>
                                                                                                                    </select> 
                                                                                                                </label>
                                                                                                                <label>操作类型 
                                                                                                                    <select name="fundOperation" class="form-control h-30">
                                                                                                                        <option value="">全部</option>
                                                                                                                    </select> 
                                                                                                                </label>
                                                                                                                <label>资金状态 
                                                                                                                    <select name="fundStatus" class="form-control h-30">
                                                                                                                        <option value="">全部</option>
                                                                                                                    </select> 
                                                                                                                </label>
                                                                                                                <button class="btn btn-sm pt4 pb4 btn-system" id="searchFundRecord"><i class="fa fa-search mr5"></i>查询</button>-->

                                                    </div>
                                                </div>
                                                <div class="panel-body pn">
                                                    <!--<div class="markItUpHeader p14"></div>-->
                                                    <table class="table table-striped table-hover table-text-center" id="fundRecordList" cellspacing="0" width="100%">
                                                        <thead>
                                                            <tr>
                                                                <th>操作人ID</th>
                                                                <th>流水号</th>
                                                                <th>类型</th>
                                                                <th>操作时间</th>
                                                                <th>备注</th>
                                                            </tr>
                                                        </thead>
                                                        <tbody></tbody>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>

                                    </div>
                                </div>
                            </div>
                        </div>
                </section>
                <!-- 页面内容结束 -->
            </section>
        </div>
        <!-- 主体内容结束 -->

        <!-- Admin Form Popup -->
        <div id="uploadPanel" class=" popup-basic admin-form mfp-with-anim mfp-hide">
            <div class="panel">
                <div class="panel-heading">
                    <span class="panel-title fs20"><i class="fa fa-rocket"></i>上传认证图片</span>
                </div>
                <div class="panel-body p25">
                    <div class="fileupload fileupload-new admin-form" data-provides="fileupload">
                        <div class="tray-bin mb10 cursor-pointer text-center pt20 text-muted-lighter bg-light dark" id="upZone">
                            <i class="fa fa-folder-open-o mr10 fs20 text-muted-lighter"></i>点击选择图片
                        </div>
                        <div class="section of-h text-center mb20" id="imagePreview"></div>
                        <div class="section mb10">
                            <label for="fileName" class="field prepend-icon">
                                <input type="text" name="fileName" id="fileName" class="event-name gui-input br-light light" placeholder="图片名称">
                                <label for="fileName" class="field-icon"><i class="fa fa-tag"></i></label>
                            </label>
                        </div>
                        <div class="section mb10">
                            <label class="field prepend-icon">
                                <textarea class="gui-textarea br-light h-80 bg-light" id="description" name="description" placeholder="图片说明"></textarea>
                                <label for="comment" class="field-icon"><i class="fa fa-comments"></i></label>
                                <span class="input-footer">
                                    <strong>提示:</strong>只能上传图片,大小为&nbsp;&nbsp;<strong style="color: red;">800*800</strong></span>
                            </label>
                        </div>
                        <button class="btn btn-primary btn-block" id="doUploadBtn"><i class="fa fa-check mr10"></i>保存图片</button>

                        <form action="" name="uploadForm" class="hidden" >
                            <input type="file" id="fileInput"/> 
                            <button class="btn btn-danger hidden" id="uploadBtn"><i class="icon-ok"></i> 上传</button>
                        </form>
                    </div>
                </div>
            </div>
            <!-- end: .panel -->
        </div>

        <script type="text/x-tmpl-mustache" id="imageTemplate">
            <div class="image bg-light mr20 p10 mw180 pull-left">
            <div class="text-center of-h bg-white">
            <img src="{{url}}!s" data-url="{{url}}" class="h-120 doc_img cursor-pointer" title="{{name}}" />
            </div>
            <div class="img-title">
            <h6 class="ellipsis"><code>{{name}}</code></h6>
            <h6>上传日期：{{createTime}}</h6>
            <h6 class="mbn">
            <span class="delete-link cursor-pointer" data-id="{{id}}"><i class="fa fa fa-times text-danger"></i> 删除</span>
            </h6>
            </div>
            </div>
        </script>
        <script type="text/x-tmpl-mustache" id="refereeTemplate">
            <a href="user/index/{{id}}" target="_blank">{{loginName}}（{{name}}）</a>
        </script>

        <!-- 公共函数 -->
        <%@include file="../common/scripts.jspf" %>
        <script type="text/javascript" src="${rootPath}/js/admin-tools/admin-forms/js/jquery-ui-timepicker.min.js"></script>
        <script type="text/javascript" src="${rootPath}/js/admin-tools/admin-forms/js/lang/jquery-ui-timepicker-zh.js"></script>
        <script type="text/javascript" src="${rootPath}/js/plugins/daterange/moment.min.js"></script>
        <script type="text/javascript" src="${rootPath}/js/plugins/daterange/daterangepicker.js"></script>
        <script type="text/javascript" src="${rootPath}/js/pages/pointsystem/commodity_index.js"></script>
    </body>
</html>